<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone = no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <title></title>
  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script> -->
  <link href="../datepicker/foundation-datepicker.min.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
  <link rel="stylesheet" href="./addBrand.css">
  <link rel="stylesheet" href="../common.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="../datepicker/foundation-datepicker.min.js"></script>
  <script src="../datepicker/foundation-datepicker.zh-CN.js"></script>
  <script src="../common.js"></script>

</head>

<body>
  
  <div class="container">
    <div class="navContainer" >
      <div class="navContent">
        <div class="logo">
          <img src="../images/logo.png">
        </div>
        <ul class="list">
          <li>首页</li>
          <li>热门榜单</li>
          <li>品牌视界</li>
          <li>中企头条</li>
          <li>中企荣誉墙</li>
        </ul>
        <div class="button">参加活动</div>
      </div>
    </div>
    <div class="topImage">
      <div class="topTitle">一键加入品牌视界</div>
      <div class="redLine"></div>
    </div>
    <div class="content">
      <form class="formContent">
        <ul class="needInputGroup">
          <li>
            <div class="need">
              <div class="label"><span>公司名称</span></div>
              <div class="inputGroup area80 error">
                <input class="input" type="text"  value="" placeholder="请输入公司名称">
                <!-- <div class="textCount">80</div> -->
                <div class="status"></div>
              </div>
              <div class="errorText">
                <div class="label"></div>
                <img src="../images/ts_cw_icon.png">
                <span>验证码有误</span>
              </div>
            </div>
          </li>
          <li>
            <div class="need">
              <div class="label"><span>公司名称</span></div>
              <div class="inputGroup area80">
                <input class="input" type="text"  value="" placeholder="请输入公司名称">
                <!-- <div class="textCount">80</div> -->
                <div class="status"></div>
              </div>
            </div>
          </li>
          <li>
            <div class="need">
              <div class="label">公司名称</div>
              <div class="inputGroup area80 error">
                <input class="input" type="text" value="" id="datetimepicker" placeholder="请输入公司名称">
                <!-- <div class="textCount">80</div> -->
                <div class="status"></div>
              </div>
            </div>
            <!-- <div class="error">
              <img src="../images/homeAddBrand/error.png">
              <span>网址有误</span>
            </div> -->
          </li>
          <li>
            <div class="need">
              <div class="label" style="align-self: flex-start"><span>上传证件</span></div>
              
              <div class="needFileGroup">
                <div style="width: 100%;display: flex;justify-content: space-between;">
                  <div class="needFile">
                    <div class="mark">
                      <img src="../images/upload/loading.gif">
                    </div>
                    <div class="uploadFail">
                      <img src="../images/ts_cw_icon.png">
                      <button type="button" class="uploadFailButton">重新上传</button>
                    </div>
                    <img class="deleteCurrentImage" src="../images/upload/close.png">
                    <label>
                      <img class="showImage" />
                      <div class="slotClass">
                        <img src="../images/upload/camera.png">
                        <div class="label">营业执照</div>
                      </div>
                      <input class="fileClass" type="file" accept="image/*"/>
                    </label>
                  </div>
    
                  <div class="needFile">
                    <div class="mark">
                      <img src="../images/upload/loading.gif">
                    </div>
                    <div class="uploadFail">
                      <img src="../images/ts_cw_icon.png">
                      <button type="button" class="uploadFailButton">重新上传</button>
                    </div>
                    <img class="deleteCurrentImage" src="../images/upload/close.png">
                    <label>
                      <img class="showImage"/>
                      <div class="slotClass">
                        <img src="../images/upload/camera.png">
                        <div class="label"><span>营业执照</span></div>
                      </div>
                      <input class="fileClass" type="file" accept="image/*"/>
                    </label>
                  </div>
                  <div class="needFile">
                    <div class="mark">
                      <img src="../images/upload/loading.gif">
                    </div>
                    <div class="uploadFail">
                      <img src="../images/ts_cw_icon.png">
                      <button type="button" class="uploadFailButton">重新上传</button>
                    </div>
                    <img class="deleteCurrentImage" src="../images/upload/close.png">
                    <label>
                      <img class="showImage"/>
                      <div class="slotClass">
                        <img src="../images/upload/camera.png">
                        <div class="label"><span>营业执照</span></div>
                      </div>
                      <input class="fileClass" type="file" accept="image/*"/>
                    </label>
                  </div>
                  <div class="needFile">
                    <div class="mark">
                      <img src="../images/upload/loading.gif">
                    </div>
                    <div class="uploadFail">
                      <img src="../images/ts_cw_icon.png">
                      <button type="button" class="uploadFailButton">重新上传</button>
                    </div>
                    <img class="deleteCurrentImage" src="../images/upload/close.png">
                    <label>
                      <img class="showImage"/>
                      <div class="slotClass">
                        <img src="../images/upload/camera.png">
                        <div class="label"><span>营业执照</span></div>
                      </div>
                      <input class="fileClass" type="file" accept="image/*"/>
                    </label>
                  </div>
                </div>
                <div class="info">
                  (上传图片大小请控制在5M以内）
                </div>
              </div>

            </div>
          </li>
          <li>
            <div class="need">
              <div class="label" style="align-self: flex-start">公司名称</div>
              <div class="textareaGroup area800">
                <textarea class="input" name="textarea1" placeholder="请填写详细说明（限制字数5-800）"></textarea>  
                <!-- <div class="textCount">800</div> -->
                <!-- <div class="status"></div> -->
              </div>
            </div>
          </li>
          <li>
            <div class="need">
              <div class="label" style="align-self: flex-start">公司名称</div>
              <div class="textareaGroup area800">
                <textarea class="input" name="textarea2" placeholder="请填写详细说明（限制字数5-800）"></textarea>  
                <!-- <div class="textCount">800</div> -->
              </div>
            </div>
          </li>
          <li>
            <div class="need">
              <div class="label" style="align-self: flex-start">
                <input type="text" placeholder="请填写标题">
              </div>
              <div class="textareaGroup area800">
                <textarea class="input" name="textarea4" placeholder="请填写详细说明（限制字数5-800）"></textarea>  
                <!-- <div class="textCount">800</div> -->
              </div>
            </div>
          </li>
          <li id="appendTextarea" class="endStatus">
            <div class="need">
              <div class="label"></div>
              <div class="appendTextarea appendTextareaDel" style="margin-right: 30px">
                <img src="../images/add.png" alt="" srcset="">
                删除品牌信息
              </div>
              <div class="appendTextarea appendTextareaAdd">
                <img src="../images/add.png" alt="" srcset="">
                添加品牌信息
              </div>
            </div>
          </li>
          <li>
            <div class="need">
              <div class="label"><span>验证码</span></div>
              <div class="validateGroup">
                <input class="imgInput error" type="text"  value="" placeholder="请输入公司名称">
                <div class="img"><img /></div>
              </div>
            </div>
          </li>
          <li>
            <div class="need">
              <div class="label"><span>验证码</span></div>
              <div class="phoneGroup">
                <input type="text"  value="" placeholder="请输入公司名称">
                <div class="status"></div>
              </div>
              <div class="errorText">
                <div class="label"></div>
                <img src="../images/ts_cw_icon.png">
                <span>验证码有误</span>
              </div>
            </div>
          </li>
          <li>
            <div class="need">
              <div class="label"><span>短信验证</span></div>
              <div class="codeGroup error">
                <input type="text"  value="" placeholder="请输入公司名称">
                <div class="getCode">发送短信</div>
                <!-- <div class="status"></div> -->
              </div>
              <div class="errorText">
                <div class="label"></div>
                <img src="../images/ts_cw_icon.png">
                <span>验证码有误</span>
              </div>
            </div>
          </li>
        </ul>
        <div class="buttonSubmit">添加品牌</div>
      </form>
    </div>
    <div class="bottomContainer">
      <div class="bottomContent">
        <div class="left">
          <p class="title">友情链接</p>
          <ul class="row">
            <li class="cell"><a>新华网</a></li>
            <li class="cell"><a>新华网</a></li>
            <li class="cell"><a>新华网</a></li>
          </ul>
          <ul class="row">
            <li class="cell"><a>国家统计局</a></li>
            <li class="cell"><a>新华网</a></li>
            <li class="cell"><a>新华网</a></li>
          </ul>
        </div>
        <div class="center">
          <p class="title">联系我们</p>
          <p class="phone">客服电话</p>
          <p class="phoneNumber">400-159-0958</p>
          <p class="email">邮箱</p>
          <p class="emailAddress">kefu@10pinpaiwang.com</p>
        </div>
        <div class="right">
          <div class="code">
            <div><img src="" alt="" srcset="" ></div>
            <p class="small">中信网M端 <br> 扫码立即打开1</p>
          </div>
          <div class="code">
            <div><img src="" alt="" srcset="" ></div>
            <p class="small">中企公众号 <br> 扫码立即关注</p>
          </div>
        </div>
      </div>
      <p class="bottomRecord">Copyright 中企品牌网(www.brandzw.com) 京ICP备19006167号-1</p>
    </div>
    <div class="toast">
      <p class="title">提示</p>
      <p class="text">信息填写不完整，请检查并修改！</p>
    </div>
  </div>
</body>
</html>

<script>

  var addBrandInit = {
    getCode: function () {
      var timer, z
      $('.getCode').click(function () {
        if (z) return
        console.log('???')
        z = 60
        timer = setInterval(() => {
          z--
          $('.getCode').text(z + 's')
          if (!z) {
            z = 0
            $('.getCode').text('获取验证码')
            clearInterval(timer)
          }
        }, 1000)
      })
    },
    submit: function () {
      function noneOther (name, index, display) {
        var allStatus = ['.mark', '.fileClass', '.uploadFail', '.showImage', '.uploadFail', '.slotClass', '.uploadFailButton']
        for (let i = 0; i < allStatus.length; i++) {
          if (name === allStatus[i]) {
            allStatus.splice(i, 1)
          }
        }
        for (let j = 0; j < allStatus.length; j++) {
          $($(allStatus[j])[index]).css('display', 'none')
        }
        $($(name)[index]).css('display', display)
        return $($(name)[index])
      }
      var fileClasses = $('.fileClass')
      var uploadFailButtons = $('.uploadFailButton')
      // var uploadFail = $('.uploadFail')
      // var showImages = $('.showImage')
      // var uploadFails = $('.uploadFail')
      // var slotClasses = $('.slotClass')
      for (var i = 0; i < 6; i++) {
        (function (i) {
          $(fileClasses[i]).change(function () {
            var file = this.files[0]
            if (window.FileReader) {
              var reader = new FileReader()
              reader.readAsDataURL(file)
              reader.onloadend = function (e) {
                console.log(e, i, file)
                noneOther('.mark', i, 'flex')
                // noneOther('.showImage', i, 'flex').attr('src', '')
                // var params = new FormData()
                // params.append('file',oFiles[0])
              }
            }
          })
          uploadFailButtons.click(function () {
            document.getElementById('img' + i).click()
          })
        })(i)
      }
      $('.buttonSubmit').click(function () {
        var t = $('form').serializeArray()
        console.log(t)
      })
    },
    toast: function () {
      $('.toast').click(function () {
        $('.toast').fadeOut()
      })
      $('.buttonSubmit').click(function () {
        $('.toast').fadeIn()
        setTimeout(() => {
          $('.toast').fadeOut()
        }, 1500)
      })
    },
    area: function () {
      let arr = ['.area80', '.area800']
      for (let i in arr) {
        $( arr[i] + ' .input' ).on('input propertychange', function() {
          var num = parseInt(arr[i].match(/\d+/g)[0])
          var that = $(this),  
              _val = that.val()
          if (_val.length > num) {
            that.val(_val.substring(0, num))
          }  
          $(this).parent().children('.textCount').text(num - that.val().length)
        })
      }
    },
    uploadFile: function () {
      function noneOther (name, index, display) {
        var allStatus = ['.mark', '.uploadFail', '.deleteCurrentImage', '.showImage', '.slotClass', '.fileClass']
        for (let i = 0; i < allStatus.length; i++) {
          if (name === allStatus[i]) {
            allStatus.splice(i, 1)
          }
        }
        for (let j = 0; j < allStatus.length; j++) {
          $($(allStatus[j])[index]).css('display', 'none')
        }
        $($(name)[index]).css('display', display)
        return $($(name)[index])
      }
      var fileClasses = $('.fileClass')
      var uploadFailButtons = $('.uploadFailButton')
      var deleteCurrentImages = $('.deleteCurrentImage')
      var uploadFail = $('.uploadFail')
      var showImages = $('.showImage')
      // var uploadFails = $('.uploadFail')
      // var slotClasses = $('.slotClass')
      for (var i = 0; i < 6; i++) {
        (function (i) {
          $(fileClasses[i]).change(function () {
            var file = this.files[0]
            if (window.FileReader) {
              var reader = new FileReader()
              reader.readAsDataURL(file)
              reader.onloadend = function (e) {
                console.log(e, i, file)
                // noneOther('.mark', i, 'flex')

                noneOther('.showImage', i, 'flex').attr('src', e.target.result)
                $(deleteCurrentImages[i]).show()

                // noneOther('.uploadFail', i, 'flex')
                
                // var params = new FormData()
                // params.append('file',file)
              }
            }
          })
          $(uploadFailButtons[i]).click(function () {
            $(fileClasses[i]).click()
          })
          $(deleteCurrentImages[i]).click(function () {
            console.log($(fileClasses[i]), '???', $(fileClasses[i]).value)
            $(fileClasses[i])[0].value = ''
            $(showImages[i]).removeAttr('src', '')
            noneOther('.slotClass', i, 'flex')
          })
        })(i)
      }
    },
    appendTextarea: function () {
      function endStatus () {
        $('.appendTextareaAdd').css('display', 'none')
        $('.appendTextareaDel').css('display', 'flex')
        $($('.appendTextareaDel')[0]).css('display', 'none')
        $($('.appendTextareaAdd')[$('.appendTextareaAdd').length - 1]).css('display', 'flex')
        $($('.appendTextareaDel')[$('.appendTextareaDel').length - 1]).css('display', 'flex')
        $('.endStatus').removeAttr('id')
        $($('.endStatus')[$('.endStatus').length - 1]).attr('id', 'appendTextarea')
        if ($('textarea').length === 3) $('.appendTextareaDel').css('display', 'none')
      }
      endStatus()
      $('.needInputGroup').on('click','.appendTextareaAdd',function(e){
        let textareaIndex = parseInt($('.textareaGroup').length)  + 1
        var dom = "<li>"+
          " <div class=\"need\">"+
          "   <div class=\"label\" style=\"align-self: flex-start\">"+
          "     <input type=\"text\" placeholder='请填写标题' class=" + 'textareaTitle' + textareaIndex + ">"+
          "   </div>"+
          "   <div class=\"textareaGroup area800\">"+
          "     <textarea class=\"input\" name=" + 'textarea' + textareaIndex + " placeholder='请填写详细说明（限制字数5-800）'></textarea>  "+
          "   </div>"+
          " </div></li>"+
          "<li id=\"appendTextarea\" class=\"endStatus\">"+
          "  <div class=\"need\">"+
          "    <div class=\"label\"></div>"+
          "    <div class=\"appendTextarea appendTextareaDel\" style=\"margin-right: 30px\">"+
          "      <img src=\"../images/add.png\" alt=\"\" srcset=\"\">"+
          "      \u5220\u9664\u54C1\u724C\u4FE1\u606F"+
          "    </div>"+
          "    <div class=\"appendTextarea appendTextareaAdd\">"+
          "      <img src=\"../images/add.png\" alt=\"\" srcset=\"\">"+
          "      \u6DFB\u52A0\u54C1\u724C\u4FE1\u606F"+
          "    </div>"+
          "  </div>"+
          "</li>"
        $('#appendTextarea').after(dom)
        addBrandInit.area()
        endStatus()
      })
      
      $('.needInputGroup').on('click','.appendTextareaDel',function(e){
        console.log($(this).parent().parent())
        // $(this).parent().parent().remove()
        $(this).parent().parent().prev().remove()
        $(this).parent().parent().remove()
        endStatus()
      })
    },
    submit: function () {
      $('.buttonSubmit').click(function () {
        var t = $('form').serializeArray()
        console.log(t)
      })
    } 

  }
  $(document).ready(function () {
		$('#datetimepicker').fdatepicker({format: 'yyyy-mm-dd'})

    for (var i in addBrandInit) {
      addBrandInit[i]()
    }
  })
</script>
